<template>
  <li class="drawer-item" @click="$emit('click')">
    <!-- 图标 -->

    <div class="icon">
      <slot name="icon" v-if="$slots.icon"></slot>
      <IconConfigProvider v-else color="gray" size="16">
        <Icon>
          <InsertDriveFileSharp />
        </Icon>
      </IconConfigProvider>
    </div>
    <span class="text">
      <slot></slot>
    </span>
  </li>
</template>

<script>
import { InsertDriveFileSharp } from "@v2icons/material"
import { Icon, IconConfigProvider } from "@v2icons/utils"

export default {
  name: "DrawerItem",
  components: {
    InsertDriveFileSharp,
    Icon,
    IconConfigProvider
  }
}
</script>

<style scoped lang="less">
.drawer-item {
  cursor: pointer;
  display: flex;
  margin-left: 1rem;
  margin-top: 0.4rem;
  // align-items: center;
}
.icon {
  transform: translateY(-3px);
  margin-right: 4px;
  width: 16px;

  img {
    border-radius: 4px;
    width: 100%;
  }
}
</style>
